<template>
  <div class="notariza">
    <div class="notariza-btns">
      <el-input placeholder="输入公证书指纹" class="notariza-token" size="small" v-model="notarizaToken"></el-input>
      <el-button :disabled='!notarizaToken' class="checkNotariza" type="primary" size="small" @click="checkNotariza">指纹校验</el-button>
      <el-upload
        class="notariza-upload"
        action=""
        :multiple='true'
        :auto-upload="false"
        :show-file-list="false"
        :on-change="notarialFileCheck">
        <el-button type="primary" size="small">上传公证书校验</el-button>
      </el-upload>
      <p class="tips">
        输入公证书指纹,点击指纹校验，可只针对指纹进行校验;<br>
        输入公证书指纹,上传公证书，可对指纹与上传公证书进行匹配校验;<br>
        只上传公证书，可针对此公证书进行校验;
      </p>
    </div>
    <div class="notariza-list">
      <div class="notariza-result" v-if="notarizaInfo.checkResult">
        校验结果：{{notarizaInfo.checkResult}}
      </div>
      <div class="notariza-wrap">
        <div class="notariza-item">
          <span>新上传文件</span>
          <p class="file-content" v-if="notarizaInfo.newFile.filePath">
            文件地址：<a :href="`/${notarizaInfo.newFile.filePath}`" :download="notarizaInfo.newFile.fileName">{{notarizaInfo.newFile.fileName}}</a><br>
            文件指纹：{{notarizaInfo.newFile.fingerprint}} <br>
            创建时间: {{notarizaInfo.newFile.createTime}}
            <img v-if="IsImg(notarizaInfo.newFile.filePath)" :src="`/${notarizaInfo.newFile.filePath}`">
          </p>
          <el-empty v-else description="暂无数据"></el-empty>
        </div>
        <div class="notariza-item">
          <span>已存在文件</span>
          <p class="file-content" v-if="notarizaInfo.oldFile.filePath">
            文件地址：<a :href="`/${notarizaInfo.oldFile.filePath}`" :download="notarizaInfo.oldFile.fileName">{{notarizaInfo.oldFile.fileName}}</a><br>
            文件指纹：{{notarizaInfo.oldFile.fingerprint}} <br>
            创建时间: {{notarizaInfo.oldFile.createTime}}
            <img v-if="IsImg(notarizaInfo.oldFile.filePath)" :src="`/${notarizaInfo.oldFile.filePath}`">
          </p>
          <el-empty v-else description="暂无数据"></el-empty>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import { useStore } from 'vuex';
export default defineComponent({
  name: 'deposit',
  setup() {
    let notarizaToken = ref('');
    const store = useStore();
    let notarizaInfo:any = reactive({
      checkResult: '',
      oldFile: {
        createTime: '',
        fileName: '',
        filePath: '',
        fingerprint: ''
      },
      newFile: {
        createTime: '',
        fileName: '',
        filePath: '',
        fingerprint: ''
      }
    });
    // 公证书校验
    const notarialFileCheck = async(file:any) => {
      const formData = new FormData();
      formData.append('file', file.raw, file.name);
      formData.append('fingerprint', notarizaToken.value);
      const { newFile, oldFile } = await store.dispatch('notarialFileCheck', formData);
      resetFileData();
      newFile ? notarizaInfo.newFile = newFile : '';
      oldFile ? (notarizaInfo.oldFile = oldFile, notarizaInfo.checkResult = '通过' ) : notarizaInfo.checkResult = '不通过';
    };
    // 指纹校验
    const checkNotariza = async() => {
      const formData = new FormData();
      formData.append('fingerprint', notarizaToken.value);
      const { newFile, oldFile } = await store.dispatch('notarialFileCheck', formData);
      resetFileData();
      newFile ? notarizaInfo.newFile = newFile : '';
      oldFile ? (notarizaInfo.oldFile = oldFile, notarizaInfo.checkResult = '通过' ) : notarizaInfo.checkResult = '不通过';
    };
    const resetFileData = () => {
      notarizaInfo.checkResult = '';
      Object.keys(notarizaInfo.oldFile).forEach(item => {
        notarizaInfo.newFile[item] = '';
        notarizaInfo.oldFile[item] = '';
      });
    };
    const IsImg = (path) => {
      if (path && path.includes('.')) {
        const imgTypes = ['jpg', 'jpeg', 'png', 'gif'];
        const fileType = path.split('.').slice(-1)[0];
        if (imgTypes.includes(fileType)) {
          return true;
        }
        return false
      }
      return false
    }
    return {
      notarialFileCheck,
      checkNotariza,
      IsImg,
      notarizaInfo,
      notarizaToken
    };
  },
});
</script>
<style lang="scss" scoped>
.notariza {
  .notariza-btns {
    @extend %container;
  }
  .notariza-list {
    @extend %container;
    margin-top: 10px;
    p {
      line-height: 30px;
    }
  }
  .notariza-token {
    width: 280px;
    display: inline-block;
  }
  .notariza-upload {
    display: inline-block;
    margin-left: 10px;
  }
  .tips {
    font-size: 12px;
    line-height: 20px;
    margin-top: 10px;
    color: #9e9e9e;
  }
  .checkNotariza {
    margin-left: 10px;
  }
  .notariza-wrap {
    display: flex;
    .notariza-item {
      width: 50%;
      &:first-child {
        border-right: #f0f2f5 solid 1px;
      }
      span {
        font-size: 18px;
        font-weight: bold;
        line-height: 30px;
      }
      &:last-child {
        span {
          margin-left: 20px;
        }
      }
    }
  }
  .file-content {
    line-height: 30px;
    padding: 10px 20px;
    img {
      max-width: 100%;
      display: block;
      margin: 10px auto;
    }
  }
  .notariza-result {
    font-size: 20px;
    line-height: 40px;
    font-weight: bold;
    margin-bottom: 10px;
  }
}
</style>











